<template>
    <div>
        <!-- 查询条件 -->
        <div class="queryCriteria">
            <!-- 条件组,插槽 -->
            <slot></slot>
            <!-- 按钮组 -->
            <el-button v-for="(i, n) in btnList" :key="n" :type="i.type" size="default" :icon="i.icon" @click="i.click">
                {{ i.name }}
            </el-button>
        </div>
        <!-- 表格区域 -->
        <el-table class="tableCss" v-loading="tableLoading" element-loading-text="Loading..."
            :element-loading-spinner="svg" element-loading-svg-view-box="-10, -10, 50, 50"
            element-loading-background="rgba(122, 122, 122, 0.8)" border :data="paginatedData"
            :default-sort="{ prop: 'date', order: 'descending' }" height="calc(100vh - 235px)"
            :show-overflow-tooltip="true">
            <el-table-column fixed align="center" label="序号" width="60">
                <template #default="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column align="center" sortable v-for="(i, n) in columns" :key="n" :prop="i.prop" :label="i.label"
                :formatter="i.formatter" :width="i.width">
                <template #default="scope">
                    <span v-if="!i.isImg">
                        {{ formatCell(i, scope.row) }}
                    </span>
                    <img v-else-if="scope.row[i.prop]" :src="scope.row[i.prop]" alt="" draggable="false"
                        :style="`width: ${i.height}px; height: ${i.height}px`"
                        @click="handleImageClick(scope.row[i.prop])" />
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <!-- 固定列 -->
            <el-table-column v-if="isFixedColumn" fixed="right" align="center" label="操作" width="100">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="btnListTable[0].click(scope.row, 1)">{{
                        btnListTable[0].name
                    }}</el-button>
                    <el-popover placement="bottom" trigger="click">
                        <template #reference>
                            <el-button link type="primary" size="small">更多</el-button>
                        </template>
                        <div>
                            <el-button v-for="(i, n) in btnListTable2" :key="n" link type="primary" size="small"
                                @click="i.click(scope.row, 1)">{{
                                    i.name }}</el-button>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="example-pagination-block">
            <div class="demo-pagination-block">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30, 40, 50]" size="small" :disabled="disabled" :background="background"
                    layout="->,total, sizes, prev, pager, next, jumper" :total="totalData"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
        <!-- 模态框 -->
        <el-dialog v-model="dialogVisible" width="60%" top="1vh" center>
            <div class="dialog">
                <img :src="enlargedImageUrl" draggable="false" style="width: 100%;" />
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang='ts'>
import { ref, computed, defineProps, onMounted, defineEmits } from 'vue';
// import { ElMessage } from 'element-plus';
// import type { TableColumnCtx } from 'element-plus'

const props = defineProps({
    columns: {
        type: Array,
        validator: () => {
            return [];
        }
    },
    paginatedData: {
        type: Array,
        validator: () => {
            return [];
        }
    },
    btnList: {
        type: Array,
        validator: () => {
            return [];
        }
    },
    btnListTable: {
        type: Array,
        validator: () => {
            return [];
        }
    },
    isFixedColumn: {// 是否有操作列
        type: Boolean,
        default: true
    },
    tableLoading: {// 是否加载中
        type: Boolean,
        default: false,
    },
});

// 操作列 更多按钮组
const btnListTable2 = ref(props.btnListTable.slice(1))

// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const disabled = ref(false)
const background = ref(false)
const enlargedImageUrl = ref('');
const dialogVisible = ref(false);

// 点击图片事件
const handleImageClick = (imageUrl: any) => {
    enlargedImageUrl.value = imageUrl;
    dialogVisible.value = true;
}

const page = defineEmits(['pageSize', 'currentPage']);

// 分页事件 val: number
const handleSizeChange = () => {
    page('pageSize', pageSize.value)
}
const handleCurrentChange = () => {
    page('currentPage', currentPage.value)
}

// 计算总数据条数
const totalData = computed(() => props.paginatedData.length);

// 加载中
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `

// 格式化单元格内容
const formatCell = (column: any, row: string) => {
    return column.formatter ? column.formatter(row) : row[column.prop];
}

onMounted(() => {

});
</script>

<style scoped lang="scss">
.tableCss {
    width: 98%;
    // margin: 1%;
    margin-left: 15px;
    margin-top: 10px;
}

.queryCriteria {
    width: 98%;
    padding: 10px 10px 0 20px;
}

/* 设置表头背景颜色 */
:deep(.el-table__header) th {
    background-color: #f3f4f4 !important;
    color: #000 !important;
    font-weight: 500;
}

:deep(.demo-pagination-block) {
    /* 分页靠右显示 */
    width: 100%;
    text-align: right;

    .el-pagination__rightwrapper {
        margin: 10px 20px 10px 0;
    }
}

// .example-pagination-block+.example-pagination-block {
//     margin-top: 10px;
// }

// .example-pagination-block .example-demonstration {
//     margin-bottom: 16px;
// }

/* 插槽中的表单 */
:deep(.el-form) {
    display: inline-block;

    .el-form-item {
        margin-bottom: 0;
    }
}

.dialog {
    margin: 10px;
}

.dialog-footer {
    text-align: right;
}
</style>